import React, { useEffect, useState } from 'react'
import { isUndefined, isEmpty } from 'lodash'
import { BorderBox1, Loading } from '@jiaminghi/data-view-react'
import { connect } from 'dva';

import Options from './options'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/title';
import LoadSty from '../../../utils/hooks'

import sty from './index.module.scss'
import data from './data'    //虚拟数据列

function Index({ getData }) {

    const [Load, setLoad] = useState('flex')    //控制加载框

    const InitCreate = (config) => {
        // setLoad
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('topCom'));
        // 绘制图表
        myChart.setOption(Options(config));
    }
    //初始化的时候先加载一次虚拟固定数据
    useEffect(() => {
        InitCreate(data)
    }, [])
    //如果真实数据加载了  替换假数据
    useEffect(() => {
        if (!isEmpty(getData.dataChun)) {
            InitCreate(getData)
            setLoad('none')
        }
    }, [getData])

    return (
        <BorderBox1 className={sty.LeftTop}>
            <Loading style={LoadSty(Load)}>大数据计算加载中.....</Loading>
            <div id="topCom" className={sty.topCom}></div>
        </BorderBox1 >
    )
}

const mapStateToProps = ({ leftTopPage }, ownProps) => {
    return {
        getData: leftTopPage
    }
}

export default connect(mapStateToProps)(Index)